<template>
	<view class="content">
		<view :class="show ? 'fade-in' : 'fade-out'">
			<view class="list">
				<view class="user tn-flex">
					<view class="user-left tn-flex">
						<image :src="user.avatar" mode=""></image>
						<text class="t1">{{user.nickname}}</text>
					</view>
					<text class="user-right" @click="sendmsg">联系TA</text>
				</view>
				<view class="tag-list tn-flex tn-flex-row-between">
					<text>项目分类：{{user.game_name}}</text>
				</view>
				<view class="tag-list tn-flex tn-flex-row-between">
					<text>性别要求：{{user.sex == 1 ? '男生' : '女生'}}</text>
				</view>
				<view class="tag-list tn-flex tn-flex-row-between">
					<text>单价要求：{{user.min_price}}-{{user.max_price}}/局</text>
				</view>
				<block v-for="(item,index) in user.tags" :key="index">
					<view class="tag-list tn-flex tn-flex-row-between">
						<text>{{item.name}}：{{item.option}}</text>
					</view>
				</block>
				<view class="tag-list tn-flex tn-flex-row-between">
					<text>期望时间：{{user.exp_date}}</text>
				</view>
				<view class="tag-list tn-flex tn-flex-row-between">
					<text>其他要求：{{user.other}}</text>
				</view>
			</view>

			<view class="foot-btn" v-if="user.status == 1 && type == 1" @click="submit">确认抢单</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				user: '',
				playList: [],
				show: false,
				type: '',
				myUserid: uni.getStorageSync('user_id')
			};
		},
		onLoad(option) {
			this.id = option.id
			if(option.type){
				this.type = option.type
			}
			this.getuser()
		},
		methods: {
			async getuser() {
				try {
					let result = await this.$request({
						loading: 1,
						method: 'post',
						url: '/api/play_matching/play_matching_info',
						data: {
							play_matching_id: this.id
						}
					})
					console.log(result)
					this.user = result.data.data
					this.show = true
				} catch (e) {
					//TODO handle the exception
				}
			},
			async submit() {
				try {
					let result = await this.$request({
						loading: 1,
						method: 'post',
						url: '/api/play_matching/play_preempt',
						data: {
							play_matching_id: this.id
						}
					})
					this.msg(result.data.msg)
					setTimeout(() => {
						uni.redirectTo({
							url: "/playcenterPage/my-grab"
						})
					}, 800)
				} catch (e) {
					this.msg(e.data.msg)
					//TODO handle the exception
				}
			},
			sendmsg() {
				if (this.user.user_id == this.myUserid) {
					this.msg('自己不能撩自己')
					return
				}
				this.navigateToFn({
					url: '/minePages/chat/talk?toid=' + this.user.user_id + '&toname=' + this.user.nickname,
					checkLogin: true
				})

			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 30rpx;

		.list {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 24rpx;

			.user {
				align-items: center;
				justify-content: space-between;
				margin-bottom: 32rpx;

				.user-left {
					align-items: center;

					image {
						width: 72rpx;
						height: 72rpx;
						border-radius: 10rpx;
					}

					.t1 {
						font-size: 28rpx;
						font-weight: bold;
						color: #FFFFFF;
						margin-left: 16rpx;
					}
				}

				.user-right {
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
				}
			}

			.tag-list {
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
				margin-bottom: 24rpx;
			}

		}

		.give-clear {
			font-size: 36rpx;
			font-weight: bold;
			color: #FFB2F9;
			height: 122rpx;
			text-align: center;
			line-height: 122rpx;
		}

		.foot-btn {
			position: absolute;
			left: 30rpx;
			right: 30rpx;
			bottom: 40rpx;
			height: 88rpx;
			background: linear-gradient(180deg, #DB89F5 0%, #834BF4 100%);
			border-radius: 20rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			line-height: 88rpx;
		}



	}
</style>
